<template>
<div class="box">
  <div class="top">
    
   <router-link to="/start"> <img @click="login" :src="headerImg()" alt="" /></router-link>
     <span class="span1" v-if="panduan()">点击登录</span>
     <span class="span1" v-else>{{info.nickname}}</span>
    <span class="span2" v-if="panduan()">登录后可体验更多功能</span> 
    <div id="btn">
        <van-popover
      v-model:show="showPopover"
      :actions="actions"
      @select="onSelect"
      placement="bottom-end"
    >
      <template #reference>
    <van-button type="primary">设置</van-button>
  </template>
    </van-popover>
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Toast } from "vant";

const showPopover = ref(false);

const login = () => {}
// 通过 actions 属性来定义菜单选项
const actions = [{ text: "修改昵称" }, { text: "修改密码" }];
const onSelect = (action) => Toast(action.text);

// 获取登录数据
let info = JSON.parse(sessionStorage.getItem('userInfo'))
// 头像判断
const headerImg = () => {
  if(!info === null){
    return info.headerimg
  }
  return '未登录'
}

// 登录信息判断
const panduan = () => {
  // if()
  if(info == null){
    console.log('1');
    return true
  }else {
    console.log('-1');
    return false
  }
}

</script>

<style scoped lang="scss">
.box{
  background: url('../../public/image/login.png') no-repeat;
 background-size: cover;
  .top {
  height: 200px;
  //background: rgb(195, 209, 227);
  position: relative;

  img {
    width: 95px;
    height: 95px;
    border-radius: 50%;

    margin-top: 25%;
    margin-left: 20px;
    background: url('../../public/image/0DB97813F732C006D13A7EDBDE601189.png');
    background-size: cover;
  }

  .span1 {
    position: absolute;
    top: 55%;
    left: 35%;
  }
  .span2 {
    position: absolute;
    top: 74%;
    left: 35%;
    font-size: 16px;
    font-weight: 400;
  }

  #btn{
    position: absolute;
    top: 0;
    right: 0px;
    background:rgb(195, 209, 227,0.5) ;
  }
}
}


</style>